<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维标签加载_基础</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建大量点</div>
      <div onclick="clearMarker()" class="btn">清除点位</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建文字点位
       */
      const add = () => {
        const bbox = [7717.92, 4540.8575, 2.9991015625, 8233.4, 5078.333125, 3.12015625]
        const getRandNumBetween = (min, max) => {
          return Math.round((Math.random() * (max - min) + min) * 10) / 10
        }

        // 定义marker数组
        const markerList = []

        for (let i = 0; i <= 200; i++) {
          let x = getRandNumBetween(bbox[0], bbox[3]) //minX ~ maxX
          let y = getRandNumBetween(bbox[1], bbox[4]) //minY ~ maxY

          // 定义点位坐标
          const coordinate = [x, y]

          const marker = {
            id: 'marker_' + i,
            text: 'M_' + i, //显示的文字
            coordinate: coordinate, //坐标位置
            range: [0, 100000], //可视范围
            imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
            imageSize: [108 / 3, 142 / 3]
          }
          // 往数组中添加 marker 对象
          markerList.push(marker)
        }

        // 添加dts marker
        let markerLayer = {
          id: 'markerLayer1',
          groupId: 'markerLayer',
          coordinateType: 1, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          range: [0, 200, 2000, 10000],
          autoHeight: true,
          color: '#ffffff',
          radius: 10,
          fixedSize: false,
          anchors: [-108 / 6, 142 / 3], //锚点

          useTextAnimation: false, //关闭文字展开动画效果 打开会影响效率
          textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: '#6b4020', //文本背景颜色
          fontSize: 12, //字体大小
          fontOutlineSize: 1, //字体轮廓线大小
          fontColor: Color.White, //字体颜色
          fontOutlineColor: Color.Black, //字体轮廓线颜色

          autoHeight: true, // 自动判断下方是否有物体
          displayMode: 2, //智能显示模式  开发过程中请根据业务需求判断使用四种显示模式
          clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
          priority: 0, //避让优先级
          occlusionCull: true, //是否参与遮挡剔除
          markers: markerList
        }
        fdapi.markerLayer.add(markerLayer)
      }

      const clearMarker = () => {
        fdapi.markerLayer.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(2 | 4)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
